<template>
    <div class="orderdesc-wrapper">
    <v-header title="订单详情" ref="header">
        <p slot="right" @click="handleShowCode" v-if="orderInfo.orderGoodsList && orderInfo.orderGoodsList.length > 0 && (orderInfo.shipStatus === 1 || orderInfo.receiptStatus === 1) && (orderInfo.orderGoodsList[0].goodsType === 102 || orderInfo.orderGoodsList[0].goodsType === 101) ">二维码</p>
    </v-header>
    <scroll ref="scroll" style="overflow: hidden;height: 100%"
        :style="{height: scrollHeight + 'px'}">
      <div>
         <!-- 顶部div包括 -->
        <div class="orderDescTop" :style="{backgroundImage:`url(${imgUrl})`}">
            <div class="orderDescTopLeft">
                <p>
                    <i class="fa fa-clock-o" aria-hidden="true" style="color: red"></i> {{orderInfo.orderStatusDesc}}
                </p>
            </div>
            <div class="orderDescTopRight" v-if="orderInfo.orderStatus === 0">
                    <p>需付款： ¥{{orderInfo.totalAmount}}</p>
            </div>
        </div>
        <!-- 收获地址只是针对特产 -->
        <div class="specialtyWrapper" v-if="orderInfo.orderGoodsList && orderInfo.orderGoodsList.length > 0 && orderInfo.orderGoodsList[0].goodsType === 201">
            <div>
                <i class="fa fa-map-marker" aria-hidden="true"></i> {{orderInfo.concat}}&nbsp;&nbsp;&nbsp;{{orderInfo.phone}}
            </div>
            <div class="addressManage">
                <p>
                    地址： {{orderInfo.receiptAddress}}
                </p>
            </div>
        </div>
        <!-- 展示商品信息 -->
        <div class="attention" v-for="(item, index) in orderInfo.orderGoodsList" v-if="index < 1" :key="item.index" @click="handleGoDesc(item.goodsId, item.goodsType)">
            <div class="myOrder">
                <div class="myOrderLine">
                </div>
                <div class="myOrderText">
                    <p>商品信息</p>
                </div>
            </div>
            <hr class="orderhrtwo">
            <div class="shoppingWrapper" v-for="item in orderInfo.orderGoodsList" :key="item.index">
                <div class="shoppingDetail">
                    <div class="shoppingImage" :style="{backgroundImage:`url(${item.goodsImage})`}">
                    </div>
                    <div class="shoopingDesc">
                        <div>
                            <p class="shoppingTitle">{{item.goodsName}}</p>
                            <p class="shoppingDescContent">{{item.goodsIntro}}</p>
                            <div class="shoppingNumandMoney">
                                <p class="shopppingNum">数量： {{item.goodsNum}}</p>
                                <p v-if="(orderInfo.orderStatus === 1 || orderInfo.orderStatus === 3) && (orderInfo.shipStatus === 1 || orderInfo.receiptStatus === 1)">已消费：{{item.usedQuantity}}</p>
                                <p class="shoppingMoney">¥{{item.goodsPrice}}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="remarkWrapper" v-if="item.remark != undefined">
                    <p>备注：{{item.remark}}</p>
                </div>
             </div>
        </div>

        <!-- 入园须知 -->
        <div class="attention" v-if="orderInfo.orderGoodsList && orderInfo.orderGoodsList.length && (orderInfo.orderGoodsList[0].goodsType === 101 || orderInfo.orderGoodsList[0].goodsType === 102)">
            <div class="myOrder">
                <div class="myOrderLine">
                </div>
                <div class="myOrderText">
                    <p>注意事项</p>
                </div>
            </div>
            <hr class="orderhrtwo">
           <div>
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item>
                    <div class="flex-demo-oaa">
                        <ul>
                            <li v-for="item in orderInfo.notice" :key="item.id" class="noticeText">{{item}}</li>
                        </ul>
                    </div>
                    </flexbox-item>
            </flexbox>
           </div>
        </div>

        <!-- 发票信息 -->
        <div class="attention" v-if="orderInfo.invoice === 1">
            <div class="myOrder">
                <div class="myOrderLine">
                </div>
                <div class="myOrderText">
                    <p>发票信息</p>
                </div>
            </div>
            <hr class="orderhrtwo">
           <div>
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>发票类型</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>{{invoiceMessage.invoiceType === 0 ? '普通发票' : '电子发票'}}</span>
                    </div>
                  </flexbox-item>
            </flexbox>
           </div>
           <div>
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>发票抬头</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>{{invoiceMessage.invoiceRiseType === 0 ? '个人' : '单位'}}</span>
                    </div>
                  </flexbox-item>
                </flexbox>
           </div>
           <div>
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>公司名称</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>{{invoiceMessage.companyName}}</span>
                    </div>
                  </flexbox-item>
                </flexbox>
           </div>
           <div>
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>税号</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>{{invoiceMessage.registrationNumber}}</span>
                    </div>
                  </flexbox-item>
                </flexbox>
           </div>
           <div>
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>收票人手机号</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>{{invoiceMessage.accountPhone ? invoiceMessage.accountPhone : '无'}}</span>
                    </div>
                  </flexbox-item>
                </flexbox>
           </div>
           <div>
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>收票人邮箱</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>{{invoiceMessage.accountEmail ? invoiceMessage.accountEmail : '无'}}</span>
                    </div>
                  </flexbox-item>
                </flexbox>
           </div>
           <div>
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>发票内容</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>{{invoiceMessage.invoiceContentType === 0 ? '商品明细' : '商品类别'}}</span>
                    </div>
                  </flexbox-item>
                </flexbox>
           </div>
        </div>

        <!-- 游客信息 -->
        <div class="attention">
            <div class="myOrder">
                <div class="myOrderLine">
                </div>
                <div class="myOrderText">
                    <p>游客信息</p>
                </div>
            </div>
            <hr class="orderhrtwo">
           <div>
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>手机号</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>{{orderInfo.phone}}</span>
                    </div>
                  </flexbox-item>
            </flexbox>
           </div>
           <hr class="orderhrthree">
           <div>
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>昵称</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>{{orderInfo.nickname}}</span>
                    </div>
                  </flexbox-item>
                </flexbox>

                <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>联系人</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>{{orderInfo.concat}}</span>
                    </div>
                  </flexbox-item>
                </flexbox>
           </div>
        </div>

        <!-- 订单信息 -->
        <div class="attention">
            <div class="myOrder">
                <div class="myOrderLine">
                </div>
                <div class="myOrderText">
                    <p>订单信息</p>
                </div>
            </div>
            <hr class="orderhrtwo">
           <div>
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>订单号</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>{{orderInfo.outTradeNo}}</span>
                    </div>
                  </flexbox-item>
            </flexbox>
           </div>
           <div v-if="orderInfo.orderGoodsList && orderInfo.orderGoodsList.length > 0 && orderInfo.orderGoodsList[0].effectiveDate !== undefined">
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>出行时间</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>{{orderInfo.orderGoodsList[0].effectiveDate}}</span>
                    </div>
                  </flexbox-item>
                </flexbox>
           </div>
           <div>
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>下单时间</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>{{orderInfo.createAt}}</span>
                    </div>
                  </flexbox-item>
                </flexbox>
           </div>
        </div>


        <!-- 商品信息 -->
        <div class="attention">
            <div class="myOrder">
                <div class="myOrderLine">
                </div>
                <div class="myOrderText">
                    <p>支付信息</p>
                </div>
            </div>
            <hr class="orderhrtwo">
           <div>
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>商品总额</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>¥{{orderInfo.totalAmount}}</span>
                    </div>
                  </flexbox-item>
            </flexbox>
           </div>
           <div>
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>运费</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>¥0.00</span>
                    </div>
                  </flexbox-item>
                </flexbox>
           </div>
           <div>
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>支付方式</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>在线支付</span>
                    </div>
                  </flexbox-item>
                </flexbox>
           </div>
           <div>
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>配送方式</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>快递运输</span>
                    </div>
                  </flexbox-item>
                </flexbox>
           </div>
           <div>
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>配送时间</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>工作日、双休日与节假日均可送货</span>
                    </div>
                  </flexbox-item>
                </flexbox>
           </div>
           <hr class="orderhrtwo">
           <div class="payWrapper">
               <p v-if="orderInfo.orderStatus === 0">
                   需付款： <span>¥{{orderInfo.totalAmount}}</span>
               </p>
               <p v-if="orderInfo.orderStatus === 3">
                   已付款： <span>¥{{orderInfo.totalAmount}}</span>
               </p>
           </div>
        </div>
         <div style="height: 15px">
         </div>
      </div>
     </scroll>
      <div class="bottomDiv" v-show="orderInfo.orderStatusDesc !== '等待发货'">
            <button class="btnleft" v-if="orderInfo.orderStatus === 2 || orderInfo.orderStatus === 3" @click="handleDeleteOrder(orderInfo.id)">删除订单</button>
            <button class="btnleft" @click="toCansel()" v-if="orderInfo.orderStatus === 0">取消订单</button>
            <button class="btn btnright" @click="toPay()" v-if="orderInfo.orderStatus === 0">去支付</button>
            <button class="btn btnleft" @click="handleQuitMoney(orderInfo.outTradeNo)" v-if="orderInfo.orderStatus === 3">退款</button>
            <button class="btnleft" v-if="orderInfo.orderStatus === 3 && orderInfo.commentStatus === 1" @click="handleHaveEvalution()">已评价</button>
            <button class="btn btnrightOne" @click="handleToEvaluation(orderInfo.productId, orderInfo.outTradeNo, orderInfo.orderGoodsList[0].goodsImage, orderInfo.goodsType)" v-if="orderInfo.orderStatus === 3 && orderInfo.orderGoodsList.length > 0 && orderInfo.commentStatus === 0">去评价</button>
            <button class="btn btnright" @click="handleGoShoppingDesc(orderInfo)" v-if="orderInfo.orderStatus === 2 || orderInfo.orderStatus === 3">再来一单</button>
            <button class="btn btnTwo" v-if="orderInfo.orderStatus === 1 && orderInfo.shipStatus === 1" @click.stop="handleConfirmStatus(orderInfo.outTradeNo)">确认收货</button>
            <button class="btn btnright" v-if="orderInfo.orderStatus === 1 && orderInfo.shipStatus === 1" @click.stop="handleLogistics(orderInfo)">查看物流</button>
      </div>

        <x-dialog v-model="showCodeBox" hide-on-blur :dialog-style="{'max-width': '100%', width: '100%', height: '50%', 'background-color': 'transparent'}">
            <div class="codeWrapper">
                <img :src="orderInfo.qrcode" alt="">
            </div>
        </x-dialog>

    </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import { Group, Cell, CellBox, Flexbox, FlexboxItem, Card, Flow, FlowState, FlowLine, Scroller, XButton, Actionsheet, Divider, Confirm, XDialog } from 'vux'
import axios from '@/api/axiosApi'
import Scroll from '@/components/scroll/scroll'
import { localUser } from '@/assets/js/local'
import nativeBridge from '@/assets/js/nativeBridge'
import { handleBackMixin } from '@/assets/js/mixin'
export default {
  mixins: [handleBackMixin],
  data () {
    return {
      scrollHeight: '500',
      imgUrl: 'http://qiniucdn.iwiteks.com/orderback.png',
      orderInfo: {},
      invoiceMessage: {},
      allPopupModels: [],
      showCodeBox: false
    }
  },
  created () {
    this.getOrderDesc()
    this.getInvoiceDesc()
  },
  methods: {
    // 获取订单详情
    getOrderDesc () {
      axios.get(this, '/v1/order/' + this.$route.params.outTradeId, null, (data) => {
        switch (data.orderStatus) {
          case 0:
            data.orderStatusDesc = '等待付款'
            break
          case 1: if (data.shipStatus === 0) {
            data.orderStatusDesc = '等待发货'
          } else if (data.shipStatus === 1) {
            data.orderStatusDesc = '等待收货'
          }
            break
          case 2:
            data.orderStatusDesc = '已取消'
            break
          case 3:
            data.orderStatusDesc = '已完成'
            break
          case 4:
            data.orderStatusDesc = '退款中'
            break
          case 5:
            data.orderStatusDesc = '已退款'
            break
          case 6:
            data.orderStatusDesc = '退款失败'
            break
        }
        if (typeof data.orderGoodsList[0].notice !== 'undefined') {
          data.notice = data.orderGoodsList[0].notice.replace(/；/g, ';').split(';')
        }
        this.orderInfo = data
      })
    },
    // 获取发票详情
    getInvoiceDesc () {
      axios.get(this, '/v1/invoice/' + this.$route.params.outTradeId, null, (data) => {
        this.invoiceMessage = data
      })
    },
    handleGoDesc (id, type) {
      if (type === 201) {
        this.$router.push('/specialLocalProductDetail/' + id)
      } else if (type === 101) {
        this.$router.push('/hotel/' + id)
      } else if (type === 102) {
        this.$router.push('/scenic/' + id)
      }
    },
    // 确认退款
    handleQuitMoney (outTradeNo) {
      const _self = this
      _self.$vux.confirm.show({
        title: '温馨提示',
        content: '退款审核期为三天，请耐心等待',
        onConfirm () {
          axios.post(_self, '/v1/refund/' + outTradeNo, null, (data) => {
            _self.$router.push('/user/orderQuitServer')
            _self.$store.commit('SET_QUITORDER_TAB', 0)
          })
        }
      })
    },
    toPay () {
      nativeBridge.alipay(this.$route.params.outTradeId, ({arg, msg}) => {
        if (arg === 9000) {
        //   if (this.orderInfo.orderGoodsList[0].goodsType === 201) {
          this.$store.commit('SET_ORDER_TAB', 2)
        //   } else {
        //     this.$store.commit('SET_ORDER_TAB', 4)
        //   }
          this.$router.push('/user/order')
        }
        this.$vux.toast.text(msg, 'middle')
      })
    },
    toCansel () {
      axios.put(this, '/v1/cancelOrder/' + this.$route.params.outTradeId, null, (data) => {
        this.$vux.toast.text('订单取消成功', 'middle')
        this.$router.push('/user/order')
        this.$store.commit('SET_ORDER_TAB', 4)
      })
    },
    handleToEvaluation (id, outTradeNo, goodsImage, type) {
      sessionStorage.setItem('outTradeNo', outTradeNo)
      sessionStorage.setItem('goodsImageEvalution', goodsImage)
      sessionStorage.setItem('goodsType', type)
      this.$router.replace('/user/evalution/' + id)
    },
    handleGoShoppingDesc (item) {
      item.orderGoodsList.forEach(element => {
        element.userId = localUser.get('id')
      })
      let param = {
        shoppingCartString: item.orderGoodsList
      }
      if (item.goodsType === 201) {
        axios.post(this, '/v1/shoppingCartList', {shoppingCartString: JSON.stringify(param)}, (data) => {})
        this.$router.push('/user/shoppingcart')
      } else if (item.goodsType === 102) {
        this.$router.push('/scenic/' + item.orderGoodsList[0].goodsId)
      } else if (item.goodsType === 101) {
        this.$router.push('/hotel/' + item.orderGoodsList[0].goodsId)
      }
    },
    // 物流处理
    handleLogistics (oderMessage) {
      sessionStorage.setItem('shoppingImage', oderMessage.orderGoodsList[0].goodsImage)
      sessionStorage.setItem('goodsName', oderMessage.goodsName)
      this.$router.push('/user/logistics/' + oderMessage.shipNumber)
    },
    // 确认收货
    handleConfirmStatus (outTradeNo) {
      axios.post(this, '/v1/orderReceive/' + outTradeNo, null, (data) => {
        this.$vux.toast.text('收货成功', 'middle')
        this.$store.commit('SET_ORDER_TAB', 5)
        this.$router.replace('/user/order')
      })
    },
    handleHaveEvalution () {
      this.$vux.toast.text('你已评价过此订单了哟', 'middle')
    },
    // 删除订单
    handleDeleteOrder (id) {
      const _self = this
      _self.$vux.confirm.show({
        title: '温馨提示',
        content: '你确定删除此订单吗',
        onConfirm () {
          axios.delete(_self, '/v1/order/' + id, null, (data) => {
            _self.$vux.toast.text('删除成功', 'middle')
          })
        }
      })
    },
    handleShowCode () {
      this.showCodeBox = true
    }
  },
  components: {
    VHeader,
    Group,
    Cell,
    CellBox,
    Flexbox,
    FlexboxItem,
    Card,
    Flow,
    FlowState,
    FlowLine,
    Scroller,
    XButton,
    Actionsheet,
    Divider,
    Confirm,
    Scroll,
    localUser,
    XDialog
  },
  mounted () {
    this.scrollHeight = window.innerHeight - 60 - 38
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
.orderdesc-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $color-background;
  z-index: 101;
  height: 100%;
}

.orderDescTop {
    padding-top 10px
    padding-left 15px
    padding-right 15px
    padding-bottom 10px
    display flex
    align-items center
    justify-content space-between
    width 100%
    height 60px
    .orderDescTopLeft {
        p {

        }
    }
    .orderDescTopRight {
        p {
            margin-right 30px
        }
    }
}

.specialtyWrapper {
    padding-top 10px
    padding-left 15px
    padding-right 15px
    padding-bottom 10px
    margin-top 10px
    background-color white
    .addressManage {
        padding-left 12px
        p {
            font-size $font-size-desc
            color $color-text-2
        }
    }
}

.shoppingWrapper {
    background-color white
    border-bottom-style solid
    border-width:1px
    border-color: #E4E4E4
    .shoppingTop {
        padding-top 10px
        padding-left 15px
        padding-right 15px
        padding-bottom 5px
        border-bottom-style solid
        border-width:1px
        border-color: #E4E4E4
    }
    .shoppingDetail {
        padding-top 10px
        padding-left 15px
        padding-right 15px
        padding-bottom 10px
        display flex
        .shoppingImage {
            width: 73px
            height 70px
            background-size: cover
            background-repeat: no-repeat
        }
        .shoopingDesc {
            width calc(100% - 80px)
            padding-left 10px
            .shoppingTitle {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
            }
            .shoppingDescContent {
                margin-top 2px
                font-size $font-size-desc
                color $color-text-2
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
            }
            .shoppingNumandMoney {
                margin-top 4px
                font-size $font-size-desc
                color $color-text-2
                display flex
                justify-content space-between
            }
            .usedQuantity {
                p {
                    font-size $font-size-desc
                    color $color-text-2
                }
            }
        }
    }
    .remarkWrapper {
        padding-left 15px
        padding-right 15px
        margin-bottom 5px
        p {
            font-size 13px
        }
    }
}

.orderStatus {
    padding:10px;15px;15px;30px;
    background-color:$color-theme-1;
}

.ordercell {
    background-color:white;
}

.flex-demo-o span {
    color:$color-theme;;
    margin-left:15px;
    font-size:$font-size-large
}

.flex-demo-oa span {
    color:$color-theme;
}

.flex-demo-oa {
    margin-left:10px;
    margin-top:3px;
    margin-bottom:3px;
}

.flex-demo-ot span {
    color:$color-text-2
    font-size:$font-size-small
}

.moneyOrderDesc {
    color:$color-theme;
}

.orderhr {
  height:1px;border:none;border-top:1px solid #E4E4E4;
}

.orderhrtwo {
  height:1px;border:none;border-top:1px solid #E4E4E4;
  margin-top:3px;
}

.orderhrthree {
  height:1px;border:none;border-top:1px dashed #E4E4E4;
  margin-top:3px;
}

.card-demo-flex {
  display: flex;
}
.card-demo-content01 {
  padding: 10px 0;
}
.card-padding {
  padding: 15px;
}
.card-demo-flex > div {
  flex: 1;
  text-align: center;
  font-size: $font-size-small
}
.card-demo-flex span {
  color: #C5C5C5;
  line-height:15px;
}

.orderdesccard {
    margin-top:-2px;
}

.orderdesccards {
    z-index 20
    margin-top: -20px
}

.attention {
    background-color:white;
    margin-top:10px;
}

.flex-demo-oaa {
    color:black;
    margin-left:15px;
    margin-top:3px;
    margin-bottom:3px;
    margin-right:15px;
    font-size:$font-size-desc;
}

.bottomDiv {
    z-index 999
    position absolute
    bottom 0px
    width 100%
    height 35px
    padding-top 10px
    padding-left 15px
    padding-right 15px
    padding-bottom 5px
    text-align right
    background-color: $color-background
    .btnleft {
        color: $color-text-2;
        width: 70px;
        height: 33px;
        border: solid 1px #E0E0E0;
        border-radius 3px
        background-color: #fff;
        &:focus {
          outline: none
        }
    }
    .btnright {
        margin-right 25px
        color: red;
        width: 70px;
        height: 33px;
        border: solid 1px red;
        border-radius 3px
        background-color: #fff;
        &:focus {
          outline: none
        }
    }
    .btnrightOne {
        color: red;
        width: 70px;
        height: 33px;
        border: solid 1px red;
        border-radius 3px
        background-color: #fff;
        &:focus {
            outline: none
        }
    }
    .btnTwo {
        color: red;
        width: 70px;
        height: 33px;
        border: solid 1px red;
        border-radius 3px
        background-color: #fff;
        &:focus {
            outline: none
        }
    }
}


.goodsDesc span {
    font-size: $font-size-desc
    color: $color-text-2
}

.goodescWrapper {
    padding-left 15px
    padding-bottom 10px
    padding-right 15px
}

.moneyOrder {
    text-align right
    margin-left -20px
}

.noticeText {
    font-size: $font-size-desc;
    color: $color-text-2;
}

.vux-1px-r p {
    color: $color-theme;
}

.flexText span {
    color: $color-text-2;
}

.payWrapper {
    padding-top 5px
    padding-left 15px
    padding-right 15px
    padding-bottom 10px
    background-color white
    text-align right
    span {
        color red
    }
}

.myOrder {
  display flex
  padding 10px 15px
  .myOrderLine {
    margin-top 4px
    margin-right 8px
    width 4px
    height 17px
    border-radius 3px
    background-color #00CEB9
  }
  .myOrderText {
    font-weight bold
    color #333333
    font-size 15px
  }
}

.dialog-demo {
  .weui-dialog{
    border-radius: 8px;
    padding-bottom: 8px;
  }
  .dialog-title {
    line-height: 30px;
    color: #666;
  }
  .img-box {
    height: 350px;
    overflow: hidden;
  }
  .vux-close {
    margin-top: 8px;
    margin-bottom: 8px;
  }
}

.codeWrapper {
    margin 0 auto
}

.closeIcon {
    margin-top 15px
}
</style>
